<template>
    <div style="margin: 40px;">

        <div>
            <Button icon="logo-twitter" type="success" size="large"  @click="btn_gray_release">金丝雀发布</Button>
            <p>说明:黑白共存，可按流量和请求header/uri进行切分流量</p>
        </div>

        <!-- 蓝绿部署模态框 -->
        <Modal v-model="show_gray_modal" width="800"  title="灰度部署" draggable>  
            <div style="min-height:400px;">
                <Tabs :value="tab_name"> 

                    <TabPane label="灰度组件" name="1" disabled>
                        <Form ref="gray_release" label-position="left"  :label-width="100" inline>
                            <Form-Item label="选择项目：">
                                <Select v-model="gray_release.project" style="width:400px" @on-change="project_change" transfer>
                                    <template v-for="project in project_list">
                                        <Option :label="project" :key="project" :value="project"  selected>{{project}} </Option>
                                    </template>
                                </Select>
                            </Form-Item>
                            <br>
                            <Form-Item label="选择服务：">
                                <!-- {{gray_release.services}} -->
                                <CheckboxGroup  v-model="gray_release.services" vertical>
                                    <template v-for="service in service_list">
                                        <Checkbox   size="large" :label="service.name" :key="service.id" :value="service.name" v-if="service.release_status>=1 && service.release_status< 99"  disabled>
                                            <span><strong>{{ service.name }}</strong>----------------存在未完成的灰度任务 {{ service.deployments.join(',') }}</span>
                                        </Checkbox >
                                        <Checkbox  size="large"   :label="service.name" :key="service.id" :value="service.name" v-else-if="service.deployments.length< 2"  disabled>
                                            <span><strong>{{ service.name }}</strong>----------------部署少于2个版本,无法灰度 {{ service.deployments.join(',') }}</span>
                                        </Checkbox > 
                                        <Checkbox   size="large"  :label="service.name" :key="service.id" :value="service.name" v-else>
                                            <span><strong>{{ service.name }}</strong>----------------部署集:{{ service.deployments.join(',') }}</span>
                                        </Checkbox >
                                    </template>
                                </CheckboxGroup >

                            </Form-Item>
                        </Form>
                    </TabPane>

                    <TabPane label="灰度版本" name="2" disabled>
                        <div v-for="(value,key) in tag_list" :key=key>  
                            <span style="padding-bottom:30px;">服务名:{{ key }}</span>
                            <div>
                                <span style="color:blue;padding-left:20px">新版本号：</span>
                                <Select style="width:200px"  v-model="gray_release.service_details[key].new_version"  transfer>
                                    <template v-for="tag in value">
                                        <Option :label="tag" :key="tag" :value="tag">{{tag}} </Option>
                                    </template>
                                </Select>
                                
                                <span style="color:green;padding-left:20px">旧版本号：</span>
                                <Select style="width:200px" v-model="gray_release.service_details[key].old_version"   transfer>
                                    <template v-for="tag in value">
                                        <Option :label="tag" :key="tag" :value="tag">{{tag}} </Option>
                                    </template>
                                </Select>
                                <br><br>
                            </div>
                        </div>

                    </TabPane>


                    <TabPane label="策略设置" name="3" disabled>
                        <strong style="margin-bottom:20px">按请求内容下发</strong>
                        <br>
                        <div style='min-height:400px;border: 1px solid #d7dde4;padding:10px'>
                            <strong>规则描述</strong>
                            <p>基于请求内容进行发布：只有满足条件的流量会会切分到灰度版本上。该策略只对直接访问的入口服务有效。多个规则为并且的关系。</p>
                            <br>
                            <strong>灰度版本访问规则</strong>
                            <div>
                                <Form ref="gray_release" label-position="left"  :label-width="150" inline>
                                    <Form-Item label="Cookie">
                                        <Select v-model="gray_release.match[0].headers.cookie.type" style="width:150px" transfer>
                                            <Option value="exact">完全匹配</Option>
                                            <Option value="regex">正则匹配</Option>
                                        </Select>
                                        <Input  v-model="gray_release.match[0].headers.cookie.value" style="width:400px"   placeholder="key=value"/>
                                    </Form-Item>
                                    <br>
                                    <Form-Item label="自定义header">
                                        <Select v-model="gray_release.match[0].headers.custom_header.type" style="width:150px" transfer>
                                            <Option value="exact">完全匹配</Option>
                                            <Option value="regex">正则匹配</Option>
                                        </Select>
                                        <Input  v-model="gray_release.match[0].headers.custom_header.key" style="width:200px"   placeholder="key"/>
                                        <Input  v-model="gray_release.match[0].headers.custom_header.value" style="width:200px"   placeholder="value"/>
                                    </Form-Item>
                                    <Form-Item label="URI">
                                        <Select v-model="gray_release.match[0].uri.type" style="width:150px"  transfer>
                                            <Option value="prefix">前缀匹配</Option>
                                            <!-- <Option value="regex">正则匹配</Option> -->
                                            <Option value="exact">完全匹配</Option>
                                        </Select>
                                        <Input  v-model="gray_release.match[0].uri.value" style="width:400px"   placeholder="URI"/>
                                    </Form-Item>
                                    <Form-Item label="流量来源于以下操作系统">
                                        <CheckboxGroup v-model="gray_release.match[0].headers.user_agent.value">
                                            <Checkbox label="Windows">Windows</Checkbox>
                                            <Checkbox label="Linux">Linux</Checkbox>
                                            <Checkbox label="Mac OS">Mac OS</Checkbox>
                                            <Checkbox label="Android">Android</Checkbox>
                                            <Checkbox label="IOS">IOS</Checkbox>
                                        </CheckboxGroup>

                                    </Form-Item>
                                    <br>
                                </Form>
                            </div>

                        </div>

                    </TabPane>
                </Tabs>
            </div>
            <div slot="footer" class="modal_footer">
                <row>
                    <i-col span="2" offset="15">
                        <Button type="primary"  @click="btn_close_modal">取消</Button>
                    </i-col>
                    <i-col span="3">
                        <div v-if="show_pre_step">
                            <Button type="primary"   @click="btn_pre_step">上一步</Button>
                        </div>
                    </i-col>
                    <i-col span="3">
                        <div v-if="show_next_step">
                            <Button type="primary"  @click="btn_next_step">下一步</Button>
                        </div>
                    </i-col>
                    <i-col span="3">
                        <div v-if="show_create">
                            <Button  type="primary"  @click="btn_create_gray">创建</Button>
                        </div>
                    </i-col>
                </row>
            </div>
        </Modal>

    </div>

</template>

<script>
import { post } from '@/api/http'
import { 
    get_project_name_list,
    get_service_v3,
    get_tags_v2,
    create_release_v2,
} from  '@/api'
export default {
    name: 'gray',
    data () {
        return {
            show_gray_modal: false,
            gray_release: {
                project: '',
                services: [],
                service_details: {},
                release_type: 2,
                match: [
                    {
                        headers: {
                            user_agent: {
                                value:[],
                            },
                            cookie: {
                                type: "exact",
                                value: "",
                            },
                            custom_header: {
                                type: 'exact',
                                key: '',
                                value: '',
                            }
                        },
                        uri: {
                            type: 'prefix',
                            value: '',
                        }
                    }
                ],
            },
            tab_name: '99',
            show_pre_step:false,
            show_next_step:true,
            show_create: false,

            project_list: [],
            service_list: [],
            tag_list: {},
            current_release: '',

        }
    },
    methods: {

        // 以下为蓝绿部署代码
        btn_close_modal(){
            this.show_gray_modal = false
        },
        btn_create_gray(){
            let data = this.gray_release
            data['new_weight'] = 50
            data['old_weight']  = 50
            if( data['services'].length==0){
                alert('服务不允许为空')
                return
            }
            post(create_release_v2,data).then(response=>{
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('创建成功')
                    this.show_gray_modal = false
                }else {
                    alert("创建失败:"+info)
                }

            })
        },

        btn_gray_release(){
            this.current_release=this.gray_release
            // init
            //bug new_version undefined 就是因为这里没清空 tab一旦设置了tab_name 就意味着已经不再是disabled 
            this.tag_list = {}  
            this.current_release.project = ''
            this.current_release.services = []
            this.current_release.service_details= {}
            this.project_list= []
            this.service_list = []
            
            
            this.show_pre_step=false
            this.show_next_step = true
            this.show_create = false
            this.get_project()
            setTimeout(() =>{
                this.tab_name="1"
                this.show_gray_modal = true
            },100); 
            
        },
        btn_pre_step(){
            if(this.tab_name=="2"){
                this.tab_name="1"
                this.show_pre_step=false
                this.show_next_step = true
                
            }else if(this.tab_name=="3"){
                console.log("333333333")
                console.log(this.current_release.service_details)
                this.tab_name="2"
                this.show_create=false,
                this.show_next_step = true
            }
        },
        btn_next_step(){
            console.log(JSON.stringify(this.current_release))
            if(this.tab_name=="1"){
               
                // to do something
                if(this.current_release.services.length==0){
                    this.$Message.error("必须选择好项目和服务")
                    return
                }
                this.show_pre_step=true
                for(let i=0;i<this.current_release.services.length;i++){
                    let service = this.current_release.services[i]
                    //神器的初始化 
                    this.current_release.service_details[service]={}
                }
                this.get_service_tags()
                setTimeout(() =>{
                    this.tab_name="2"
                },200);   
                
            }else if(this.tab_name=="2"){
                console.log("从2跳到3")
                let service_details = this.current_release.service_details
                for (let key in service_details) {
                    console.log(service_details[key],key)
                    let val = service_details[key]
                    let new_version = val['new_version']
                    let old_version = val['old_version']
                    if(new_version==undefined || old_version==undefined || new_version<=old_version){
                        this.$Message.error(key+"请先选择新旧版本,并且版本不能相同,新版必须大于旧版")
                        return
                    }
                }
                this.tab_name="3"
                this.show_next_step=false
                this.show_create = true
            }
        },
        get_service_tags(){
            let project = this.current_release.project
            let services = this.current_release.services
            let data ={
                "env": 'prod',
                "project": project,
                "services": services,
            }
            post(get_tags_v2,data).then(response=>{
                this.tag_list = response.data
            })
        },
        // 项目选择事件
        project_change(){
            let project= this.current_release.project
            this.get_service(project)
        },

        // 根据项目获取服务
        get_service(project_name){
            let data = {"project_name": project_name}
            post(get_service_v3,data).then(response=>{
                this.service_list = response.data
            })
        },
        get_project() {
            post(get_project_name_list).then(response=>{
                this.project_list = response.data
            })
        },
    },
}
</script>
<style scoped>
    .new_version_box {
        min-height:100px;
        margin:20px;
        border:1px solid green;
        text-align: center;
        line-height:100px
    }
    .old_version_box {
        min-height:100px;
        margin:20px;
        border:1px solid gray; 
        text-align: center;
        line-height:100px
    }
    .serviceInfo{
        height: 40px;
        width:250px;
    }
    .serviceDeployments{
        height: 40px;
        width: 150px;
    }
</style>